<template>
    <view class="content">
        <van-notify id="editor-notify" />

        <div class="card-outer">

            <span class="card">

                <van-image height="100%" width="100%" fit="cover" class="background" :src="content.image"
                    v-if="content.type === 'card'"></van-image>
                <card class="" :content="content"></card>

            </span>
        </div>
        <tabbar class="tabbar" @share="showShare = true" @changeLike="changeLike" :showingId="content._id"></tabbar>
        <share @select.native="selectShare" @cancel.native="closeShare" @click-overlay.native="closeShare"
            class="shareTable" :show="showShare" title="立即分享给好友" :options="options"></share>
        <overlay :show="showSave" class="overlay">
            <save-image v-if="showSave" @close="showSave = false" :content="content"></save-image>
        </overlay>
        <overlay :show="showOverlay" @click.native="showOverlay = false" class="overlay">
            <qrcode v-if="showOverlay" class="qrcode"></qrcode>
        </overlay>
        <overlay :show="needLogin" class="overlay">
            <login></login>
        </overlay>
        <!-- 下面是生成 Card
        图片使用的，因为没有办法执行组件间穿透传递。。。所以写在首页组件才有效 -->
        <view class="canvasBox" style="
                width: 0;
                height: 0;
                overflow: hidden;
                opacity: 0;
                position: absolute;
                left: -750px;
                top: 0;
            ">
            <canvas type="2d" canvas-id="customCanvas" id="myCanvas"></canvas>
            <div class="pleace">
                {{
        content.description +
        date.nongli +
        data.weekday +
        content.title +
        content.please
                }}1234567890年月日
            </div>
        </view>
    </view>
</template>

<script>
import saveImage from "./saveImage.vue";
import login from "./login.vue";
import card from "./card.vue";
import tabbar from "./tabbar.vue";
import share from "@/wxcomponents/weapp/dist/share-sheet/index";
import qrcode from "./qrcode.vue";
import overlay from "@/wxcomponents/weapp/dist/overlay/index";
import Notify from "@/wxcomponents/weapp/dist/notify/notify";
import { mapState } from "vuex";
import $store from "@/store/index";
export default {
    components: { card, tabbar, share, overlay, qrcode, login, saveImage },

    computed: {
        ...mapState({
            content: (state) => {
                console.log(state.xinyuqian.allXin.requestResult);
                const preview = state.xinyuqian.allXin.requestResult.looking;
                if (preview && preview.hasOwnProperty("_id")) {
                    return preview;
                } else {
                    state.xinyuqian.allXin.requestResult.looking =
                        state.xinyuqian.allXin.requestResult[0];
                    return state.xinyuqian.allXin.requestResult.looking;
                }
            },
            needLogin: (state) => state.user.needLogin,
        }),
    },

    data() {
        return {
            showSave: false,
            showShare: false,
            showOverlay: false,
            options: [
                { name: "微信", icon: "wechat", openType: "share" },
                { name: "下载图片", icon: "poster" },
                { name: "二维码", icon: "qrcode" },
            ],
            title: "Hello",
        };
    },
    onShareAppMessage(options) {
        // 设置菜单中的转发按钮触发转发事件时的转发内容
        var shareObj = {
            title: "价值心语签", // 默认是小程序的名称(可以写slogan等)
            path: "/pages/index/index", // 默认是当前页面，必须是以‘/’开头的完整路径
            imageUrl: this.content.type === "image" ? this.content.image : "", //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4

            success(res) {
                // 转发成功之后的回调
                if (res.errMsg == "shareAppMessage:ok") {
                }
            },
            fail() { },
            complete() { },
        };
        return shareObj;
    },
    methods: {
        changeLike(isLiked) {
            $store
                .dispatch("changeLike", {
                    isLiked,
                    _id: this.content._id,
                })
                .then(() => {
                    if (isLiked)
                        Notify({
                            type: "success",
                            message: "添加到收藏成功",
                            selector: "#editor-notify",
                        });
                })
                .catch((err) => {
                    console.error(err);
                    Notify({
                        type: "danger",
                        message: "操作失败",
                        selector: "#editor-notify",
                    });
                });
        },
        closeShare() {
            this.showShare = false;
        },
        saveImage() {
            this.showSave = true;
        },
        selectShare({ detail: { name } }) {
            this.closeShare();
            switch (name) {
                case "二维码":
                    this.showOverlay = true;
                    break;
                case "下载图片":
                    this.saveImage();
                    break;
            }
        },
    },
};
</script>

<style scoped lang="less">
.qrcode {
    margin: auto 0;
    height: 100%;
    display: flex;
    justify-content: center;
}

.shareTable {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.background {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(2px);
    background-size: length;
}

.content {


    position: relative;

    .card-outer {
        flex: none;



        .card {
            position: relative;
            overflow: hidden;
            padding: 20rpx 18rpx;
            min-width: 80vw;
            min-height: calc(80vw * 1.5);
            max-height: calc(80vw * 1.5);
            width: 80%;
        }

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .tabbar {
        margin: 5% 0;
        width: 100%;
    }

    height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
}

.text-area {
    display: flex;
    justify-content: center;
}

.title {
    font-size: 36rpx;
    color: #8f8f94;
}

#myCanvas {
    z-index: -1;
    opacity: 0;
    top: -1800px;
    left: -1200px;
}

canvas {
    width: 600px;
    height: 900px;
    background-color: white;
}

.pleace {
    position: absolute;
    font-family: Noto Serif SC;
    color: transparent;
    z-index: -1;
}
</style>
